import React, { useState } from "react"
import { Pagination } from 'antd'
import './style/about.less'
import Tabs from "../components/Tabs"
import Navbar from "../components/Navbar"
import Header from "../components/Header"
import Footer from "../components//Footer"
import { aboutPageData } from '../config/about'

export default function () {

    const [activeIdx, setActiveIdx] = useState(0)
    const [currPage, setCurrPage] = useState(new Array(aboutPageData.length).fill(1))
    return <div className='p-about'>
        {/* 头部 */}
        <Header />
        {/* banner */}
        <div className='banner'>
            <Navbar current='关于我们' />
            <div className='img' />
            <h2>此心公益</h2>
            <h2 className='subTitle'>Heart Social Work Development Center</h2>
        </div>
        <div className='content subContainer'>
            {<Tabs
                className='aboutPage'
                tabs={aboutPageData.map((item, idx) =>
                ({
                    content: <div className={activeIdx === idx ? 'active' : ''} onClick={() => setActiveIdx(idx)} key={item.title}>{item.title}</div>,
                    key: item.title
                })
                )}
            >
                {aboutPageData.map((_item, idx) =>
                    <div className='tab-item' key={Math.random()}>
                        <ul className='list'> {_item.content.slice((currPage[idx] - 1) * 3, currPage[idx] * 3).map(item =>
                            <li className='list-item' key={Math.random()}>
                                <div className='texts'>
                                    <h4 className='title_en'>{item.title_en}</h4>
                                    <h4 className='title'>{item.title}</h4>
                                    <div className='text'>{item.content.map((text, idx2) =>
                                        <p key={idx2}>{text}</p>
                                    )}
                                    </div>
                                </div>
                                <div className='img' style={{ backgroundImage: `url(${item.img})` }} />
                            </li>)}
                        </ul>
                        <div className='paginationWrap'>
                            <Pagination
                                defaultCurrent={1}
                                current={currPage[idx]}
                                defaultPageSize={3}
                                total={_item.content.length}
                                onChange={(page, pageSize) => {
                                    const arr = currPage.slice()
                                    arr[idx] = page
                                    setCurrPage(arr)
                                }}
                            />
                            <span className='more'><a href={_item.forumLink}>更多&gt;&gt;</a></span>
                        </div>
                    </div>
                )}
            </Tabs>}
        </div>
        <Footer />

    </div>
}